<template>
  <div class="menu1">
    <div class="menu1__two">
      <div class="menu1__twoo">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../../assets/images/13.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../../assets/images/13.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../../assets/images/13.jpg" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../../assets/images/13.jpg" alt />
          </van-swipe-item>
        </van-swipe>
        <div class="menu1__select">
          <i class="iconfont iconbeijingyinle">
            <span>私人FM</span>
          </i>
          <i class="iconfont iconicon-test1">
            <span>每日歌曲推荐</span>
          </i>
          <i class="iconfont iconshuju">
            <span>云音乐热歌榜</span>
          </i>
        </div>
        <div class="menu1__sony">
          <i class="iconfont iconriqi">
            <span>推荐歌单</span>
          </i>
          <span class="menu1__more">
            更多
            <i class="iconfont iconyoujian"></i>
          </span>
        </div>
        <div class="menu1__yinyuetu">
          <ul>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
          </ul>
        </div>
        <div class="menu1__sony">
          <i class="iconfont iconriqi">
            <span>推荐歌单</span>
          </i>
          <span class="menu1__more">
            更多
            <i class="iconfont iconyoujian"></i>
          </span>
        </div>
        <div class="menu1__yin">
          <ul>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
          </ul>
        </div>
         <div class="menu1__sony">
          <i class="iconfont iconriqi">
            <span>推荐歌单</span>
          </i>
          <span class="menu1__more">
            更多
            <i class="iconfont iconyoujian"></i>
          </span>
        </div>
        <div class="menu1__yinyuetu">
          <ul>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
            <li>
              <img src="../../../assets/images/13.jpg" alt />
              你努力去爱的样子，又孤独又美好
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
Vue.use(Swipe).use(SwipeItem)

export default {
  name: 'personality'
}
</script>

<style lang="scss">
.menu1 {
  .menu1__two {
    position: relative;
    height: 572px;
    overflow: auto;
    .menu1__twoo {
      height: 1400px;
      .van-swipe {
        img {
          height: 206px;
          width: 100%;
        }
      }
      .menu1__select {
        height: 134px;
        display: flex;
        justify-content: space-around;
        border-bottom: #ccc 1px solid;
        text-align: center;
        .iconfont {
          font-size: 64px;
          padding-top: 26px;
          color: rgb(236, 59, 68);
        }
        span {
          font-size: 16px;
          display: block;
          padding-top: 6px;
          color: #000;
        }
      }
      .menu1__sony {
        display: flex;
        height: 64px;
        justify-content: space-between;
        padding: 0 12px 0 12px;
        line-height: 64px;
        .iconfont {
          font-size: 24px;
          color: rgb(247, 55, 55);
        }
        span {
          font-size: 26px;
          color: #000;
          padding-left: 8px;
        }
        .menu1__more {
          font-size: 22px;
          color: rgb(48, 47, 47);
          .iconfont {
            font-size: 30px;
          }
        }
      }
      .menu1__yinyuetu {
        width: 100%;
        height: 314px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          padding: 0px 5px;
          li {
            width: 30%;
            font-size: 10px;
            padding-bottom: 5px;
            img {
              height: 128px;
              width: 100%;
              padding-bottom: 6px;
            }
          }
        }
      }
      .menu1__yin {
        width: 100%;
        // height: 216px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          padding: 0px 6px;
          li {
            width: 45%;
            font-size: 10px;
            padding-bottom: 5px;
            img {
              height: 127px;
              width: 100%;
              padding-bottom: 6px;
            }
          }
        }
      }
    }
  }
}
</style>
